<template>
	<div class="list-data">
		<h2>Better-scroll使用示例</h2>
		<div class="wrapper" ref="wrapper">
			<div class="content" v-if="listData.length>0">
				<div class="list-item" v-for="item in listData" :key="item.id">
					<span>{{ item.id }}</span>
					<div class="name">{{ item.name }}</div>
					<div class="random">{{item.rand}}</div>
				</div>
			</div>
			<div class="loading-wrapper" v-show="listData.length===0">正在加载中...</div>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import { setTimeout } from 'timers'
export default {
	data() {
		return {
			listData: [],
			scroll: null
		}
	},
	mounted() {
		setTimeout(() => {
			// 模拟异步请求数据
			this._loadData()
		}, 1000)
	},
	methods: {
		_loadData() {
			let arr = []
			for (let i = 1; i < 200; i++) {
				arr.push({ id: i, name: 'jiangxm' + i, rand: Math.random() })
			}
			this.listData = arr

			this.$nextTick(() => {
				this.scroll = new BScroll(this.$refs.wrapper, {
					scrollY: true,
					click: true
				})
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.list-data {
	width: 100%;
	height: 100%;

	>h2 {
		height: 40px;
		text-align: center;
		font-size: 20px;
		line-height: 40px;
		color: #fff;
		background-color: rgb(16, 58, 105);
	}

	.wrapper {
		position: fixed;
		width: 100%;
		top: 128px;
		bottom: 0;
		z-index: -1;

		.list-item {
			display: flex;
			align-items: center;
			line-height: 24px;

			span {
				width: 40px;
				padding-left: 6px;
			}

			.name {
				flex: 1;
			}

			.random {
				text-overflow: ellipsis;
				width: 120px;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.loading-wrapper {
			position: absolute;
			left: 50%;
			top: 48%;
			font-size: 14px;
			transform: translateX(-50%);
		}
	}
}
</style>
